<template>
  <div class="main-tradebox" >
    <el-table
      class="top_nav"
      :data="tableData.slice((page - 1) * pageSize, pageSize * page)"
      style="width: 100%"
     
    >
      <el-table-column prop="name" width="300">
        <template slot-scope="scope">
          <div class="mill_name" >
            <img src="../../assets/images/mill/mill.png" alt="" />
            <div class="mill_nav">
              <div class="mill_title">{{ scope.row.name }}</div>
              <div class="mill_text">
                <span>单价：{{ scope.row.paynumber }} {{ scope.row.paycoin }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dayincome outputcoin" width="200">
        <template slot-scope="scope">
          <div class="mill_title">矿机算力</div>
          <div class="mill_text">
            {{ scope.row.power }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="enddate" width="200">
        <template slot-scope="scope">
          <div class="mill_title" >运行周期</div>
          <div class="mill_text">{{scope.row.cycle}}天</div>
        </template>
      </el-table-column>
      <el-table-column prop="dayincome outputcoin" width="200">
        <template slot-scope="scope">
          <div class="mill_title" >预估收益</div>
          <div class="mill_text">
            {{ scope.row.dayincome + scope.row.outputcoin }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dayincome outputcoin" width="200">
        <template slot-scope="scope">
          <div class="mill_title" >剩余</div>
          <div class="mill_text">
            {{ scope.row.stock}}台
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" width="200">
        <template slot-scope="scope">
          <div class="mill_title">操作</div>
          <div class="mill_text">
            <!-- changeClick(scope.row) -->
            <el-button type="primary" @click="changeBuy(scope.row)"
              >立即租赁</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; align-items: center">
      <el-pagination
        class="pagination"
        background
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="changecurrent"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 身份验证-->
    <div class="states" v-if="identifys=='1'||'2'">
      <div class="state_info">
        
        <p v-if="identifys=='1'"></p>
        <p v-if="identifys=='2'"></p>
        <div v-show="identifys=='2'" class="show_num">
        
        
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userinfo:{},
      identifys: '3',
     formLabelAlign:{},
      pageSize: 4,
      page: 1,
      total: 5,
      dialogVisible: false,
      labelPosition:"",
      tabData:null,
      tableData: [
        {
          page: 1,
          limit: 10,
        },
      ],
    };
  },
  mounted() {
    this.mill_list();
  
  },
 
  methods: {
    changeBuy(row){
      this.dialogVisible=true
      this.formLabelAlign.autoid = row.autoid
      this.formLabelAlign.paycoin=row.paycoin
      this.formLabelAlign.name = row.name
      this.formLabelAlign.paynumber = row.paynumber
      this.getuserinfo()
      
      
    },
    //实名认证
      getuserinfo() {
      this.request(this.api.getuserinfo).then(res => {
        if(res.code==0){
          this.userinfo=res.data[0];
          // 实名认证：0：未认证；1：审核中；2：审核通过；3：审核不通过；、
          //实名认证： 未认证：no；审核中：review；已完成：completed；驳回：reject）  
          let idcardType =res.data[0].idcardstate;
          // this.identifys = res.data[0].idcardstate;
          console.log(idcardType);
          if(res.data[0].idcardstate == 'no') {
            this.identifys='0';
            this.successMsg('还未实名认证,请先去实名认证');
            
          }
          if(res.data[0].idcardstate == 'review') {
            this.identifys='1';
            this.successMsg('您正在认证审核中');
          }
          if(res.data[0].idcardstate == 'completed') {
            this.identifys='2';
            // this.successMsg('您已实名认证')
             this.$router.push({name:"MillAgreement"})
          }
        }
      })
    },


    //确认租赁
      sureLend(){
        console.log(1)
        this.tabData = this.formLabelAlign
       return this.request(this.api.add_min, this.tabData).then((res) => {
        if (res.code == 0) {
          this.successMsg(res.msg || "操作成功");
           this.$router.push({name:"Mymill"})
        }else{
          this.errMsg(res.msg);
        }
         this.dialogVisible = false;
      });
     
      },

    //我的矿机 列表渲染
    mill_list() {
      return this.request(this.api.mill_list, this.tableData).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.tableData = res.data;
          this.total = res.data.length
        }
      });
    },
   
    changecurrent(current) {
      console.log(current);
      this.page = current;
    },
  },
  //弹窗操作
   handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    
};
</script>
<style lang="scss" scoped>
/deep/ .shopDetail{
  p{
    font-size: 14px;
    margin:10px 0  10px  0;
    
  }
  p:nth-child(1){
   font-size: 30px;
   line-height: 40px;
   font-weight: bold;

  }

  p:nth-child(2){
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 20px;
    span{
      color: red;
    }
  }
}
  
.el-icon-lock{
  color: #357ce1;
  font-size: 50px ;

}
img {
  width: 121px;
  height: 121px;
}
.main-tradebox {
  width: 100%;
  .top_nav {
    width: 100%;
    padding: 0 200px;
    // margin: 0 auto;
    box-sizing: border-box;
  }
  .el-table__body {
    .el-table__row {
      height: 100px !important;
    }
  }
  .mill_name {
    display: flex;
    width: 320px;
    .mill_nav {
      margin-left: 10px;
      height: 121px;
      // padding: 10px 0;
      span {
        display: block;
      }
      span:nth-child(1) {
        font-size: 16px;
        line-height: 32px;
        font-weight: 700;
      }
      
      span:nth-child(2) {
        margin-top: 25px;
        font-size: 16px;
        color: #e44e5e;
        font-weight: 700;
      }
    }
  }
 /deep/.el-button{
   padding: 5px 20px;
 }
  .mill_title {
    font-size: 14px;
    color: #999;
    text-align: center;
  }
  
  .mill_text {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-top: 60px;
  
    span{
      font-size: 15px;
      color: #e44e5e;
      font-weight: 700;
    }
  }
  .pagination {
    margin: 57px auto 67px;
  }
}
.el-dialog__wrapper{
 
  ::v-deep .el-dialog__body{
  // font-size: 16px;
  // line-height: 16px;
  display: flex;
  justify-content: center;
  span{
    font-size: 16px;
  line-height: 16px;
  text-align: center !important;
  }
}
 
}

</style>
  